<template>
  <div class="siteManage">
    <div style="display: flex; justify-content: flex-end; align-items: center">
      <el-button type="primary" icon="Plus" @click="editMode(null)"> 新增 </el-button>
    </div>
    <el-table :data="siteData" border style="width: 100%; height: 240px">
      <el-table-column
        v-for="item in column"
        :key="item"
        :label="item.label"
        :prop="item.name"
        :width="item.width"
        align="center"
      >
        <template #default="scope">
          <div v-if="item.itemIf && item.name === 'status'">
            <el-tag effect="dark" :type="scope.row.status ? 'success' : 'danger'">
              {{ scope.row.status ? '启用' : '禁用' }}
            </el-tag>
          </div>
          <div v-if="item.itemIf && item.name === 'number'">
            <el-tooltip
              class="box-item"
              effect="dark"
              content="数据可能存在问题，请修改"
              placement="top"
              v-if="scope.row.number === 0"
            >
              <el-icon class="icon" color="red"><WarningFilled /></el-icon>
            </el-tooltip>
            {{ scope.row.number }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="operator" label="操作" width="150px" align="center" fixed="right">
        <template #default="scope">
          <el-button type="primary" icon="View" link @click="gotoInfo(scope.row)"> 详情 </el-button>
          <el-button type="primary" icon="Edit" link @click="editMode(scope.row)"> 编辑 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <SiteUpdataDrawer ref="siteUpdataRef" @getData="getData"></SiteUpdataDrawer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import { postSitePageLike } from '@/api/controller/site-controller/index'
  import SiteUpdataDrawer from '../../../siteTable/components/siteUpdataDrawer.vue'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  const loading = ref(true)
  const communityName = ref(history.state?.name)
  const communityId = ref(history.state?.id)
  const column = [
    { name: 'siteName', label: '站点名称', width: 180 },
    { name: 'communityName', label: '小区名称', width: 200 },
    { name: 'siteAddress', label: '地址', width: 200 },
    { name: 'status', label: '状态', itemIf: true, width: 100 },
    { name: 'number', label: '插座数量', itemIf: true, width: 100 },
    { name: 'price', label: '电价(元/千瓦时)', width: 140 },
    { name: 'feeRate', label: '电费分成比例(%)', width: 150 },
    { name: 'incomeRate', label: '收入分成比例(%)', width: 150 },
    { name: 'type', label: '抄表类型', width: 120 },
    { name: 'createTime', label: '设立时间', width: 120 },
    { name: 'remark', label: '备注' },
  ]

  //获取数据
  const siteData = ref([])
  onMounted(async () => {
    getData()
  })

  const getData = async () => {
    try {
      loading.value = true
      let res = await postSitePageLike({ communityName: communityName.value })
      siteData.value = res.data.list
    } finally {
      loading.value = false
    }
  }

  //编辑
  const siteUpdataRef = ref()
  const editMode = (data) => {
    siteUpdataRef.value.show(data, communityId.value)
  }

  //查看小区的站点信息
  const gotoInfo = (row) => {
    router.push({
      name: 'siteInfo',
      state: { id: row.id, name: row.siteName, cname: row.communityName },
    })
  }
</script>

<style lang="scss" scoped>
  .siteManage {
    background-color: white;
    margin: 0 0 16px 0;
    padding: 0px 20px 20px 20px;
  }
</style>
